import {Box} from '@mui/material';
import ErrorIcon from '@mui/icons-material/Error';
import FileCard from "../FileCard/FileCard";


function FilesContainer(props) {
    let readOnly = props.readOnly;
    let files = props.files;
    let error = props.error;
    let handleContextMenuOpen = props.handleContextMenuOpen;
    let onClick = props.onClick;
    let handleFileNameChange = props.handleFileNameChange;
    let handleFileSelected = props.handleFileSelected;
    let display;
    if (!error) {
        display = files.map((item, index) => { return <FileCard onContextMenuOpen={handleContextMenuOpen} key={item.id} file={item} onClick={onClick} onFileNameChange={handleFileNameChange} onFileSelected={handleFileSelected} readOnly={readOnly}/> } )
    } else {
        display = (<Box sx={{ display:'flex', justifyContent:'center' }}> <ErrorIcon/> Error</Box>)
    }
    return (
        <Box className="file-panel">
                { display }
        </Box>
    )
}

export default FilesContainer;